<template>
  <view class="login-password">
    <u-navbar
      :placeholder="true"
      bgColor="transparent"
      title=" "
      leftIcon=" "
      :autoBack="true"
      :safeAreaInsetTop="true"></u-navbar>
    <view class="t">找回密码</view>
    <view class="box flex-between">
      <input type="tel" placeholder="请输入手机号" v-model="phone" />
      <image
        v-show="phone"
        src="/static/image/clear.png"
        mode="aspectFit"
        class="icon1"
        @click="phone = ''"></image>
    </view>
    <view :class="['btn', phone ? 'ac' : '']" @click="goCode">发送验证码</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
    };
  },
  methods: {
    goCode() {
      if (!this.phone) {
        this.$alert("请输入手机号");
        return;
      }
      this.toRoute({
        path: "/login-code",
        query: {
          phone: this.phone,
        },
      });
    },
  },
};
</script>

<style lang="scss">
page {
  height: 100%;
}
.login-password {
  width: 100%;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  padding: 0 32upx;
  .t {
    font-weight: bold;
    font-size: 40rpx;
    color: #000000;
    margin-top: 60upx;
    margin-bottom: 110upx;
  }
  .box {
    width: 100%;
    height: 80rpx;
    background: #f5f7f9;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    box-sizing: border-box;
    padding: 0 24upx;
    .inp {
      width: 100%;
      height: 100%;
      font-size: 28rpx;
    }
  }
  .icon1 {
    width: 24upx;
    height: 24upx;
  }
  .btn {
    width: 100%;
    height: 80rpx;
    background: #f49c0d;
    border-radius: 64rpx 64rpx 64rpx 64rpx;
    text-align: center;
    line-height: 80upx;
    font-weight: bold;
    font-size: 28rpx;
    color: #ffffff;
    opacity: 0.4;
    margin-top: 168upx;
  }
  .ac {
    opacity: 1;
  }
}
</style>
